<template>
  <el-card class="box-card">
    <!-- 1.面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">用户管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 2.搜索框 -->
    <el-row class="row">
      <el-col :span="8">
        <el-input
          placeholder="请输入用户姓名"
          clearable
          class="inputsearch"
          v-model="query"
          @click="loadUserlist()"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="search()"
          ></el-button>
        </el-input>
        <el-button type="success" @click="dialogFormVisible = true"
          >添加用户</el-button
        >
        <!-- 添加用户 -->
        <el-dialog title="添加用户" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="用户名" :label-width="formLabelWidth">
              <el-input v-model="form.username" autocomplete="true"></el-input>
            </el-form-item>
            <el-form-item label="密码" :label-width="formLabelWidth">
              <el-input v-model="form.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" :label-width="formLabelWidth">
              <el-input v-model="form.email" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="电话" :label-width="formLabelWidth">
              <el-input v-model="form.mobile" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addUser()">确 定</el-button>
          </div>
        </el-dialog>
        <!-- 修改信息 -->
        <el-dialog title="修改信息" :visible.sync="dialogFormVisibleEdit">
          <el-form :model="form">
            <el-form-item label="用户名" :label-width="formLabelWidth">
              <el-input v-model="form.username" autocomplete="true"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" :label-width="formLabelWidth">
              <el-input v-model="form.email" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="电话" :label-width="formLabelWidth">
              <el-input v-model="form.mobile" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="edituser()">确 定</el-button>
          </div>
        </el-dialog>
        <!-- 权限管理 -->
        <el-dialog title="权限管理" :visible.sync="dialogFormVisiblequan">
          <el-form :model="form">
            <el-form-item label="用户名" :label-width="formLabelWidth" >
              {{currentUserName}}
            </el-form-item>
           
            <el-select v-model="currenRoleId" >
              <el-option label="请选择" :value="-1"></el-option>
              <el-option
                :value="item.id"
                v-for="(item,i) in roles"
                :label="item.label"
                :key="i"
              >
              </el-option>
            </el-select>
           
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="setRole()">确 定</el-button>
          </div>
        </el-dialog>
      </el-col>
    </el-row>
    <!-- 3.表单 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" label="#" width="80"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="邮箱"> </el-table-column>
      <el-table-column prop="address" label="电话"> </el-table-column>
      <el-table-column label="创建日期">
        <!-- template要使用数据，必须使用slot-scope
        选择数据源 -->
        <!-- userlist.row就是个对象，把数据格式化 -->
        <template slot-scope="userlist">
          {{ userlist.row.create_time | formdate }}
        </template>
      </el-table-column>
      <el-table-column label="用户状态">
        <template slot-scope="cope">
          <el-switch
            v-model="cope.row.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-value="100"
            inactive-value="0"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="cope">
          <el-button
            type="primary"
            @click="editUser(cope.row)"
            icon="el-icon-edit"
            circle
          ></el-button>
          <el-button
            type="success"
            icon="el-icon-check"
            circle
            @click="showquanmsg(cope.row)"
          ></el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click="showDeleUserMsgBox()"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="40"
    >
    </el-pagination>
  </el-card>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      currentUserName: '',
      currentUserId:0,
       options: [{
          value: '选项一',
          label: '主管'
        }, {
          value: '选项二',
          label: '普通员工'
        }, {
          value: '选项三',
          label: '话务员'
        }, {
          value: '选项四',
          label: '超级管理员'
        }, {
          value: '选项五',
          label: '店主'
        }],
      value: '',
      query: "",
      dialogFormVisiblequan: false,
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        }
      ],
      currentPage4: 4,
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogFormVisibleEdit: false,
      formLabelWidth: "120px",
      currentRoleId:'',
      currentUserid: -1,
      form: {
        username: "lxf",
        password: "lxf",
        email: "13331",
        phone: 1575225
      },
      roles:[]
    };
  },
  methods: {
    // 修改角色
  async  setRole(){
      const res = await axios.put(`users/${this.currentUserId}/role`,{
        rid: this.currentUserId
      })
      // 关闭对话框
      this.dialogFormVisiblequan = false
    },

    // 权限管理
  async  showquanmsg(user){
      // 获取点击用户的name值
      this.currentUserName = user.name
      this.currentUserId = user.id
      const res1 = await axios.get('roles')
      this.roles = res1.data.data
      // 获取当前的用户id
      const res = axios.get(`users/${user.id}`)
      this.currentRoleId = res.data.data.rid
      // 改变弹出框的状态
      this.dialogFormVisiblequan = true
    },
    // 修改用户信息
    edituser() {
      // 修改信息
      const res = axios.put(`users/${this.form.id}`, this.form);
      // console.log(res)
      // 修改之后关闭弹出框
      this.dialogFormVisibleEdit = false;
      // 更新数据
      this.getUserlist();
    },

    // 删除用户，打开一个消息盒子
    showDeleUserMsgBox(userId) {
      this.$confirm("确定永久删除该条记录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          // 删除对应id数据
          const res = axios.delete(`/users/${userId}`);
          // console.log(res)
          if (res.data.status == 200) {
            // 每次删除数据之后，把视图调到第一页
            this.pagenum = 1;
            // 更新数据
            this.getUserlist();
            // 提示请求成功
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 获取数据
    // getdata(){

    //  axios.get('/ug/api/wuhan/app/data/list-total').then(   (res) => {
    //     console.log(res)
    //  })

    // },
    // 弹出修改用户框
    editUser(user) {
      this.form = user;
      this.dialogFormVisibleEdit = true;
    },
    // 添加用户
    async addUser() {
      // 2.关闭对话框
      this.dialogFormVisible = false;
      const res = await axios.post("/users", this.form);
      // 清空对话框
      this.form = {};
      // console.log(res)
      const data = res.data;
      if (status === 201) {
        // 1.提示成功
        this.$message.success("添加成功");
        // 3.更新视图
        this.getUserlist();
        // 4.清空文本框
        this.form = {};
      } else {
        // 请求失败
        this.$message.error("请求失败");
      }
    },

    // 清除搜索框中的数据，重新获取数据
    loadUserlist() {
      this.getUserlist();
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    // 搜索用户
    search() {
      // 重新请求数据
      this.getUserlist();
    }
  }
};
</script>

<style>
.box-card {
  height: 100%;
}

.inputsearch {
  width: 50%;
  margin-right: 3%;
  margin-left: 3%;
  padding: 0;
}

.row {
  margin-top: 0;
  margin: 0;
  padding: 0;
}
/* 
表头 */
.el-table__header_wrapper,
.el-table__header th {
  padding: 0;
  height: 40px;
}

/* 每一行 */
.el-table__body tr,
.el-table__body td {
  padding: 0;
  height: 40px;
}

.has-gutter {
  height: 0px;
  padding: 0;
  margin: 0;
}
</style>